<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>基本资料</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" type="image/png" sizes="144x144" href="../../static/images/icon.png"/>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
	<div th:include="common/menu.html"></div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<blockquote class="layui-elem-quote">
		个人资料
		</blockquote>
		<div style="margin-left: 140px; margin-top: 32px;">
		<input type="hidden" id="sysUser" th:value="${sysUser}">
			<form class="layui-form" action="" lay-filter="userInfo">
				<div class="layui-upload">
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="headPortrait" src="" name="headPortrait" lay-verify="headPortrait" style="width: 100px;height: 100px">
				    <p id="demoText"></p>
				  </div>
				  <button type="button" class="layui-btn" id="headPortraitSubmit">上传头像</button>
				</div>
				 <div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <label class="layui-form-label">用户名：</label>
				    <div class="layui-input-block">
				      <input type="text" name="username" lay-verify="username" autocomplete="off" readonly="readonly" class="layui-input" style="width: 400px">
				    </div>
	  			</div>
	  			<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <label class="layui-form-label">邮箱：</label>
				    <div class="layui-input-block">
				      <input type="text" name="email" lay-verify="email" autocomplete="off" readonly="readonly" class="layui-input" style="width: 400px">
				    </div>
	  			</div>
<!-- 	  			<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px"> -->
<!-- 				    <label class="layui-form-label">角色：</label> -->
<!-- 				    <div class="layui-input-block"> -->
<!-- 				      <input type="text" name="sysRole.roleName" lay-verify="sysRole.roleName" autocomplete="off" readonly="readonly" class="layui-input" style="width: 400px"> -->
<!-- 				    </div> -->
<!-- 	  			</div> -->
			</form>
		</div>
		<blockquote class="layui-elem-quote">
		 密码更改
		</blockquote>
		<div style="margin-left: 140px; margin-top: 32px;">
			<form class="layui-form" action="" lay-filter="rePassword">
				<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <label class="layui-form-label">旧密码：</label>
				    <div class="layui-input-block">
				      <input type="password"  lay-verify="oldPassword" autocomplete="off"  class="layui-input" style="width: 400px">
				    </div>
	  			</div>
	  			<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <label class="layui-form-label">新密码：</label>
				    <div class="layui-input-block">
				      <input type="password"  lay-verify="newPassword" autocomplete="off"  class="layui-input" style="width: 400px">
				    </div>
	  			</div>
	  			<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <label class="layui-form-label">确认密码：</label>
				    <div class="layui-input-block">
				      <input type="password" name="password" lay-verify="password" autocomplete="off"  class="layui-input" style="width: 400px">
				    </div>
	  			</div>
	  			<div class="layui-form-item" style="margin-left: -50px;margin-top: 10px">
				    <div class="layui-input-block">
				      <button type="button" class="layui-btn" lay-submit="" lay-filter="passwordSubmit">确认修改</button>
				    </div>
	  			</div>
			</form>
		</div>
    </div>
  </div>
</div> 
<script src="../static/js/jquery-2.1.4.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script>
window.onload = function(){
	layui.use(['form', 'layedit', 'laydate','upload','element'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate
		  ,$ = layui.jquery
		  ,upload = layui.upload
		  ,element=layui.element;
		  var sysUser=$("#sysUser").val();
		  var obj = JSON.parse(sysUser);
		  var data={
				  "id":obj.id
				 ,"username":obj.username
				 ,"headPortrait":obj.headPortrait
				 ,"email":obj.email
				 ,"sysRole.roleName":obj.sysRole.roleName
		  }
		 $("#headPortrait").attr("src",obj.headPortrait);
   		 form.val("userInfo",data);
		  
		//普通图片上传
		  var uploadInst = upload.render({
		    elem: '#headPortraitSubmit'
		    ,url: '/user/headPortraitUpload.html' //上传接口
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#headPortrait').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
		    	return layer.msg('上传成功');  
		      }
		      //上传成功
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		  //自定义验证
		  var newPassword;
		  form.verify({
			  oldPassword:function(value){
				  if(value.length<=0){
					  return "旧密码不能为空";
				  }
				  if(!oldPwdVerify(value)){
					  return "旧密码不正确";
				  }
			  }
		  	  ,newPassword:function(value){
		  		  if(value.length<=0){
					  return "新密码不能为空";
				  }
		  		  var pwdVerify=/^[\S]{6,12}$/;
		  		  if(!pwdVerify.test(value)){
		  			 return "密码必须6到12位，且不能出现空格"; 
		  		  }
		  		  newPassword=value;
		  	  }
		  	  ,password:function(value){
		  		  if(value!=newPassword){
		  			  return "两次输入密码不一致";
		  		  }
		  	  }
		   });
		  //密码更换
		  form.on('submit(passwordSubmit)', function(data){
			  $.post("/user/sysUser/modifyPassword.html",{password:data.field.password},function(result){
				  if(result.code==200){
					  layer.msg('更改成功，请重新登录', function(){
						  window.open("/user/logout.html");
						});
				  }
			  })
		  });
		  function oldPwdVerify(value){
			  var status=false;
			  $.ajaxSettings.async = false;
			  $.post("/user/sysUser/oldPwdVerify.html",{oldPassword:value},function(result){
				  if(result.code==200){
					  status=true;
				  }
			  })
			  $.ajaxSettings.async = true;
			  return status;
		  }
	});
}	
</script>
</body>
</html>